# 3.36 wifi Piano

## 3.36.1 Overview

In this project, we set seven buttons to control the speaker to play tones of Do, Re, Mi, Fa, So, La, Si.

## 3.36.2 Test Code

You can manually build blocks, or directly open the code file we provide: `3-36-Web Piano Panel.ubp`. If you have any questions about how to open code files or upload code, please back to `1.9 Upload Code`.

**Build code blocks:**

1. In ![](./media/control.png), drag ![](./media/t1.png) to the script area.
2. Drag ![t195](./media/t195.png) and set the WIFI name to “LiuTest” and password to “88888888”.
3. Drag ![t196](./media/t196.png) and set the Web name to “CodingBox.local”.
4. Add ![t170](./media/t197.png) to refresh the data of each sensor on the Web page.
5. Use ![t198](./media/t198.png) and set the title to “Coding Box Web Piano”.
6. Use ![t207](./media/t207.png) to add a button that controls the speaker and set the label to “Do”.
7. In ![tone](./media/tone.png), drag ![img](./media/t64.png) to “copy callable name”, and paste it to the blank behind the “with selector” of the ![t221](./media/t221.png). Click ![t219](./media/t219.png) to add a “params” blank.

8. In ![](./media/data.png), drag ![t217](./media/t217.png) and click ![t219](./media/t219.png) to add one more blank. Put it into the “params” blank of the![t222](./media/t222.png), and modify “cat” to “100”, “dog” to “300”.

![t223](./media/t223.png)

9. Similarly, set tones of Re, Mi, Fa, Sol, La, Si.

**Complete code:**

![t224](./media/t224.png)

## 3.36.3 Test Result

Connect the coding box to the MicroBlocks via USB or Bluetooth. Click ![t59](./media/t59.png) to upload code. After connecting to wifi, you can see an IP address: ![t212](./media/t212.png). Now connect your control device (mobile phone, tablet, computer) to the same wifi and search `codingbox.local` on the browser to enter the Web page. 

Click the corresponding button on the Web page, the speaker will play the related tone.

![t225](./media/t225.png)